<div>
    <img src='./Info/IMG/SIGN/default.png' class='background-cover-center-pale'>
</div>
<div class='cover_full pre-scrollable'>
<br><br><br>

<div class='container text-center insert-bottom'>
    <div style='width:30vw;min-width:280px' class='m-auto'>
        <div class='form-signin'>
            <form action="./Code/PHP/gy-user-load.php" method="post" class="needs-validation" target="form-submit" novalidate>
                <span class='display-1'><i class="bi bi-person-circle text-light opacity-75" ></i></span>
                <h1 class="h3 mb-3 fw-normal text-light insert-up opacity-75">学生登录</h1>
                <div class='form-floating insert-up'>
                    <input type='text' maxlength="32" class='form-control opacity-75' name='sign_userid' id='userid' placeholder="请输入账号" required>
                    <label for='sign_userid'>账号</label>
                    <div class="invalid-feedback">请输入账号</div>
                </div><br>
                <div class='form-floating insert-bottom'>
                    <input type='password' maxlength="32" class='form-control opacity-75' name='sign_password' id='userpassword' placeholder="请输入密码" required>
                    <label for='sign_password'>密码</label>
                    <div class="invalid-feedback">请输入密码</div>
                </div><br>
                <div>
                    <div class='form-floating' style="width:45%;float:left">
                        <input type='text' maxlength="6" class='form-control opacity-75' autocomplete="off" name='code' id='code' placeholder="验证码" required>
                        <label for='code'>验证码</label>
                    </div>
                    
                    <div id='usercode' style='width:50%;float:right;background-color:rgb(212 223 232 / 41%);height:calc(3.5rem + 2px)' class="rounded-3" onclick="API_USE_reload_htmlcode('usercode')"></div>
                </div>
                <br><br><br>
                <input type='submit'  class='btn btn-primary w-100 btn-lg insert-bottom' value='登录'>
            </form>
        </div>
    </div>
    <br>
    <p class='lead text-light fadein'>光忆同学录--记录美好时光</p>
    <br><br>
    <br><br>
</div>
</div>
<script>
    API_USE_load_htmlcode("usercode")
    function load_user(){
        if(API_USE_check_htmlcode("code","value") == false){
            
            API_USE_reload_htmlcode('usercode')
            return false;
        }
        return true;
    }
    
    (function () {
      'use strict'

      // Fetch all the forms we want to apply custom Bootstrap validation styles to
      var forms = document.querySelectorAll('.needs-validation')

      // Loop over them and prevent submission
      Array.prototype.slice.call(forms)
      .forEach(function (form) {
        form.addEventListener('submit', function (event) {
        if (!form.checkValidity()) {
          event.preventDefault()
          event.stopPropagation()
        }else if(API_USE_check_htmlcode("code","value") == false){
            API_USE_reload_htmlcode('usercode')
            event.preventDefault()
            event.stopPropagation()
            document.getElementById("code").className ='form-control code_error';
            return false;
        }else{
            document.getElementById("code").className ='form-control';
        }
        form.classList.add('was-validated')
        }, false)
      })
    })()
</script>